import _mergeJSXProps2 from '@vue/babel-helper-vue-jsx-merge-props'
import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props'
import { createNamespace, isDef, addUnit, inBrowser } from '../utils'
import Icon from '../icon'
import './style'
var _createNamespace = createNamespace('image')
var createComponent = _createNamespace[0]
var bem = _createNamespace[1]

export default createComponent({
  props: {
    src: String,
    fit: String,
    alt: String,
    round: Boolean,
    width: [Number, String],
    height: [Number, String],
    radius: [Number, String],
    ratio: Number,
    lazyLoad: {
      type: Boolean,
      default: true
    },
    iconPrefix: String,
    showError: {
      type: Boolean,
      default: true
    },
    showLoading: {
      type: Boolean,
      default: true
    },
    errorIcon: {
      type: String,
      default: 'em-icon-circle-warn'
    },
    loadingIcon: {
      type: String,
      default: 'em-icon-loading'
    }
  },
  data: function data() {
    return {
      loading: true,
      error: false
    }
  },
  watch: {
    src: function src() {
      this.loading = true
      this.error = false
    }
  },
  computed: {
    style: function style() {
      var style = {}

      if (isDef(this.width)) {
        style.width = addUnit(this.width)
      }

      if (isDef(this.height)) {
        style.height = addUnit(this.height)
      }

      if (isDef(this.radius)) {
        style.overflow = 'hidden'
        style.borderRadius = addUnit(this.radius)
      }

      if (isDef(this.ratio)) {
        const ratio = Math.abs(this.ratio)
        if (ratio !== 0) {
          style['--scalebox-ratio'] = `${100 / ratio}%`
        }
      }

      return style
    }
  },
  created: function created() {
    var $Lazyload = this.$Lazyload

    if ($Lazyload && inBrowser) {
      $Lazyload.$on('loaded', this.onLazyLoaded)
      $Lazyload.$on('error', this.onLazyLoadError)
    }
  },
  beforeDestroy: function beforeDestroy() {
    var $Lazyload = this.$Lazyload

    if ($Lazyload) {
      $Lazyload.$off('loaded', this.onLazyLoaded)
      $Lazyload.$off('error', this.onLazyLoadError)
    }
  },
  methods: {
    onLoad: function onLoad(event) {
      this.loading = false
      this.$emit('load', event)
    },
    onLazyLoaded: function onLazyLoaded(_ref) {
      var el = _ref.el

      if (el === this.$refs.image && this.loading) {
        this.onLoad()
      }
    },
    onLazyLoadError: function onLazyLoadError(_ref2) {
      var el = _ref2.el

      if (el === this.$refs.image && !this.error) {
        this.onError()
      }
    },
    onError: function onError(event) {
      this.error = true
      this.loading = false
      this.$emit('error', event)
    },
    onClick: function onClick(event) {
      this.$emit('click', event)
    },
    genPlaceholder: function genPlaceholder() {
      var h = this.$createElement
      if (this.loading && this.showLoading) {
        return h(
          'div',
          {
            class: bem('loading')
          },
          [
            this.slots('loading') ||
              h(Icon, {
                attrs: {
                  name: this.loadingIcon,
                  classPrefix: this.iconPrefix
                },
                class: bem('loading-icon')
              })
          ]
        )
      }

      if (this.error && this.showError) {
        return h(
          'div',
          {
            class: bem('error')
          },
          [
            this.slots('error') ||
              h(Icon, {
                attrs: {
                  name: this.errorIcon,
                  classPrefix: this.iconPrefix
                },
                class: bem('error-icon')
              })
          ]
        )
      }
    },
    genImage: function genImage() {
      var h = this.$createElement
      var imgData = {
        class: bem('img'),
        attrs: {
          alt: this.alt
        },
        style: {
          objectFit: this.fit
        }
      }

      if (this.error) {
        return
      }

      if (this.lazyLoad) {
        return h(
          'img',
          _mergeJSXProps([
            {
              ref: 'image',
              directives: [
                {
                  name: 'lazy',
                  value: this.src
                }
              ]
            },
            imgData
          ])
        )
      }

      return h(
        'img',
        _mergeJSXProps2([
          {
            attrs: {
              src: this.src
            },
            on: {
              load: this.onLoad,
              error: this.onError
            }
          },
          imgData
        ])
      )
    }
  },
  render: function render() {
    var h = arguments[0]
    return h(
      'div',
      {
        class: bem({
          round: this.round,
          scale: isDef(this.ratio) && this.ratio !== 0
        }),
        style: this.style,
        on: {
          click: this.onClick
        }
      },
      [this.genImage(), this.genPlaceholder(), this.slots()]
    )
  }
})
